<template>
    <div>
        <el-button type="primary" icon="el-icon-arrow-left" @click="previous()">上一页</el-button>
        <el-calendar>
            <template slot="dateCell" slot-scope="{date, data}">
                {{ data.day.split('-').slice(1).join('-') }}
                <br>
                <el-button type="text" size="mini" style="color: #02a6ff" @click="showDetail(data.day)">
                    <i class="el-icon-view"/>详情
                </el-button>
                <el-button type="text" size="mini" style="color: #ec630f" @click="arrange(data.day)">
                    <i class="el-icon-edit"/>安排
                </el-button>
            </template>
        </el-calendar>
        <!--新增事务安排-->
        <el-dialog title="新增事务安排" :visible.sync="editFormVisibleForAddArrange" :show-close="isClose"
                   :close-on-click-modal="isClose" center>
            <el-divider><i class="el-icon-setting"></i></el-divider>
            <el-form :model="AddArrangeForm" label-width="80px" label-position="left">
                <el-form-item label="事务内容">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6}"
                        placeholder="请输入内容"
                        :maxlength="500"
                        show-word-limit
                        v-model="AddArrangeForm.content">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancle()">取 消</el-button>
                <el-button type="primary" @click="update(curId)" v-if="isUpdate">修 改</el-button>
                <el-button type="primary" @click="handle()" v-else>确 定</el-button>
            </div>
        </el-dialog>
        <!--事务安排详情-->
        <el-dialog title="事务安排详情" :visible.sync="editFormVisibleForArrange" :show-close="true"
                   :close-on-click-modal="true" center>
            <el-divider><i class="el-icon-setting"></i></el-divider>
            <el-form :model="arrangeForm" label-width="80px" label-position="left">
                <el-descriptions class="margin-top" title="" :column="3"  border>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            用户名
                        </template>
                        {{arrangeForm.userName}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号
                        </template>
                        {{arrangeForm.account}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-location-outline"></i>
                            居住地
                        </template>
                        {{arrangeForm.address}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            安排内容
                        </template>
                        {{arrangeForm.content}}
                    </el-descriptions-item>
                </el-descriptions>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //当前id
            curId:'',
            //是否修改操作
            isUpdate:false,
            //当前用户id
            id: 0,
            //当前时间
            value: '',
            //新增事务安排
            editFormVisibleForAddArrange:false,
            //事务安排详情
            editFormVisibleForArrange:false,
            //是否关闭
            isClose:false,
            //新增事务安排
            AddArrangeForm:{
                userId:0,
                content:'',
                createTime:''
            },
            //事务安排详情
            arrangeForm:{
                userName:'',
                account:'',
                address:'',
                content:'',
                createTime:''
            }
        }
    },
    watch: {
        '$route.query.id': {
            immediate: true, // 立即执行一次，以便在组件加载时获取当前的 id
            handler(newValue) {
                // 这里可以执行你需要基于新 id 做的操作
                this.id = newValue;
            }
        }
    },
    mounted() {

    },
    methods: {
        //回退到上一页
        previous(){
            this.$router.go(-1);
        },
        //显示事务详情
        showDetail(day){
            this.editFormVisibleForArrange = true;
            this.$http('/work/getArrange','POST',{
                userId:this.id,
                createTime:day
            },(resp)=>{
                let data = resp.data;
                if(data.code === 20000){
                    if(data.data===null){
                        this.arrangeForm.userName = '暂无';
                        this.arrangeForm.account = '暂无';
                        this.arrangeForm.address = '暂无';
                        this.arrangeForm.content = '暂无';
                    }else{
                        this.arrangeForm.userName = data.data.user.name;
                        this.arrangeForm.account = data.data.user.account;
                        this.arrangeForm.address = data.data.user.domicile.name;
                        this.arrangeForm.content = data.data.content;
                    }
                }
            });
        },
        //新增事务安排
        arrange(day){
            this.$http('/work/getArrange','POST',{
                userId:this.id,
                createTime:day
            },(resp)=>{
                let data = resp.data;
                if(data.code === 20000){
                    if(data.data===null){
                        this.editFormVisibleForAddArrange = true;
                        this.value = day;
                        this.AddArrangeForm.userId = this.id;
                        this.AddArrangeForm.createTime = day;
                    }else {
                        this.editFormVisibleForAddArrange = true;
                        this.isUpdate = true;
                        this.AddArrangeForm.content = data.data.content;
                        this.curId = data.data.id;
                    }
                }
            });

        },
        //更新操作
        update(id){
            console.log(id)
            this.$confirm('是否确认修改事务安排?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                this.$http('/work/updateArrange','PUT',{
                    id:id,
                    content:this.AddArrangeForm.content
                },(resp)=>{
                    let data = resp.data;
                    if(data.code === 20000){
                        this.$message({
                            type: 'success',
                            message: '更新事务安排成功!'
                        });
                        this.isUpdate = false;
                        this.cancle();
                    }else{
                        this.$message({
                            type: 'error',
                            message: '更新事务安排失败!'
                        });
                    }
                });
            }).catch(()=>{
            })
        },
        //取消
        cancle(){
            this.AddArrangeForm.content = '';
            this.AddArrangeForm.createTime = '';
            this.AddArrangeForm.userId = '';
            this.value = '';
            this.editFormVisibleForAddArrange = false;
        },
        //确定
        handle(){
            this.$confirm('是否确认新增事务安排?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http('/work/addArrange','POST',this.AddArrangeForm,(resp)=>{
                    let data = resp.data;
                    if(data.code === 20000){
                        this.$message({
                            type: 'success',
                            message: '新增事务安排成功!'
                        });
                        this.cancle();
                    }else{
                        this.$message({
                            type: 'error',
                            message: '新增事务安排失败!'
                        });
                    }
                })
            }).catch(()=>{

            })
        }
    }
}
</script>

<style>
</style>